<template>
	<view class="content">
		<view class="header">
			<view class="top">
				<view class="right" @tap="nextPage(`/pages/my/my?type=big`)">
					<u-icon name="arrow-left"></u-icon>
				</view>
				<view class="headerTitle">
					<text>我的积分</text>
				</view>
			</view>
			<view class="grade">
				<view class="ring">
					<image src="/static/my/king.png" mode=""></image>
					<text>798</text>
				</view>
				<view class="describe">
					<text>我的总积分</text>
				</view>
			</view>
		</view>
		
		<view class="gradeList">
			<view class="title">
				<text>积分明细</text>
			</view>
			
			<view class="detail">
				<view class="detailLeft">
					<text>注册成为志愿者</text>
				</view>
				<view class="detailRight">
					<text>+ 5分</text>
				</view>
			</view>
			<view class="u-border-bottom"></view>
			
			<view class="detail">
				<view class="detailLeft">
					<text>注册成为志愿者</text>
				</view>
				<view class="detailRight">
					<text>+ 5分</text>
				</view>
			</view>
			<view class="u-border-bottom"></view>
			<view class="detail">
				<view class="detailLeft">
					<text>注册成为志愿者</text>
				</view>
				<view class="detailRight">
					<text>+ 5分</text>
				</view>
			</view>
			<view class="u-border-bottom"></view>
			<view class="detail">
				<view class="detailLeft">
					<text>注册成为志愿者</text>
				</view>
				<view class="detailRight">
					<text>+ 5分</text>
				</view>
			</view>
			<view class="u-border-bottom"></view>
			<view class="detail">
				<view class="detailLeft">
					<text>注册成为志愿者</text>
				</view>
				<view class="detailRight">
					<text>+ 5分</text>
				</view>
			</view>
			<view class="u-border-bottom"></view>
			<view class="detail">
				<view class="detailLeft">
					<text>注册成为志愿者</text>
				</view>
				<view class="detailRight">
					<text>+ 5分</text>
				</view>
			</view>
			<view class="u-border-bottom"></view>
			
			
		</view>
		
	</view>
</template>

<script>
	
export default{
	data(){
		
	},
	methods: {
		//跳转列表对应页面
		nextPage(url) {
		      uni.navigateTo({
		        url: url,
		        fail() {
		          uni.switchTab({
		            url: url,
		            fail() {
		              uni.showToast({
		                title: '敬请期待',
		                icon: 'none'
		              });
		            }
		          });
		        }
		      });
		    }
	}
}
	
</script>

<style scoped lang="scss">
.content{
	.header{
		padding: 30rpx 0;
		background: #4F73FE;
		height: 480rpx;
		.top{
			display: flex;
			.u-icon{
				margin-left: 25rpx;
				margin-top: 6rpx;
				font-size: 40rpx;
				color: #FFFFFF;
			}
			.headerTitle{
				margin-right: 64rpx;
				width: 100%;
				text-align: center;
				text{
					font-size: 36rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
		.grade{
			display: flex;
			justify-content: center;
			margin-top: 40rpx;
			.ring{
				text-align: center;
				image{
					width: 352rpx;
					height: 261rpx;
				}
				text{
					position: fixed;
					left: 0;
					right: 0;
					margin-top: 90rpx;
					font-size: 100rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
			.describe{
				position: fixed;
				margin-top: 280rpx;
				text{
					margin-top: 20rpx;
					padding: 7rpx 15rpx;
					width: 180rpx;
					font-size: 26rpx;
					letter-spacing: 1rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #FFFFFF;
					border: 1rpx solid #FFFFFF;
					border-radius: 9rpx;
				}
			}
		}
	}
	.gradeList{
		margin: 20rpx;
		.title{
			margin: 30rpx 0 50rpx 0;
			text-align: center;
			text{
				padding-bottom: 10rpx;
				font-size: 36rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #222222;
				border-bottom: 6rpx #4F73FE solid;
				border-radius: 2rpx;
			}
		}
		.detail{
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			.detailLeft{
				text{
					font-size: 30rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #444444;					
				}
			}
			.detailRight{
				text{
					font-size: 30rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #FF0000;
				}
			}
		}
	}
	
}
</style>
